<template>
  <a-drawer
    class="form-data-drawer-wrapper"
    :title="title"
    :visible="visible"
    :closable="false"
    :maskClosable="false"
    :destroyOnClose="true"
  >
    <template #extra>
      <a-space :size="32">
        <div v-if="mode === 'read'" class="item" @click="onClick('edit')">
          <rb-icon type="icon-luoshu-edit" />
          <span>编辑</span>
        </div>
        <div v-if="mode === 'read'" class="item" @click="onClick('copy')">
          <rb-icon type="icon-luoshu-copy" />
          <span>复制</span>
        </div>
        <div class="item" @click="onClick('close')">
          <rb-icon type="icon-luoshu-close" />
        </div>
      </a-space>
    </template>
    <div class="container">
      <template v-for="card in filterCards" :key="card.cardCode">
        <CardWrapper
          :mode="mode"
          :card="card"
          :formCards="form.formCards"
          :curBizObject="curBizObject"
        />
      </template>
    </div>
    <template v-if="mode !== 'read'" #footer>
      <a-space :size="8">
        <!-- <a-button @click="onClick('hold')">暂存</a-button> -->
        <a-button @click="onClick('close')">取消</a-button>
        <a-button type="primary" @click="onClick('save')">提交</a-button>
      </a-space>
    </template>
  </a-drawer>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';
import { useStore } from 'vuex';
import { message } from 'ant-design-vue';
import { GetCardValue } from '@/global/util/common';
import { StatusMap } from '@/model/objectMap/flow';
import { GetBIZUUID, ResponseHandle } from '@/global/util/preUtils';
import { ActionMap } from '@/views/formHome/constant';

export default defineComponent({
  name: 'FormDataDrawer',
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: () => false,
    },
    mode: {
      type: String,
      default: () => '',
    },
    schemaCode: {
      type: String,
      default: () => '',
    },
    schemaName: {
      type: String,
      default: () => '',
    },
    form: {
      type: Object,
      default: () => ({}),
    },
    curBizObject: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props, context) {
    const store = useStore();

    const title = computed(() => {
      return `${props.schemaName}-${ActionMap[props.mode]}`;
    });
    const filterCards = computed(() => {
      return props.form.formCards.filter((card: any) => {
        if (card.cardKey === 'formLayout' && !card.columns?.length) {
          return false;
        }
        return true;
      });
    });
    const onClick = async (type: string) => {
      const values = GetCardValue(props.form.formCards, props.curBizObject);
      // 获取卡片值
      switch (type) {
        case 'edit':
          store.commit('formHome/SetMode', 'edit');
          break;
        case 'copy':
          store.commit('formHome/SetMode', 'copy');
          break;
        case 'hold':
          break;
        case 'save':
          const params = {
            bizObjectId:
              props.mode === 'edit'
                ? props.curBizObject.key
                : 'biz_' + GetBIZUUID(),
            schemaCode: props.schemaCode,
            data: values,
            status: StatusMap.Create,
          };
          const apiPath = `formHome/${
            props.mode === 'edit' ? 'save' : 'create'
          }FormBiz`;
          const res = await store.dispatch(apiPath, params);
          ResponseHandle(res, () => {
            message.success('保存成功');
            context.emit('onClose');
            context.emit('onRefresh');
          });
          break;
        case 'close':
          context.emit('onClose');
          break;
        default:
          break;
      }
    };

    return {
      title,
      filterCards,
      onClick,
    };
  },
});
</script>

<style lang="less">
.form-data-drawer-wrapper {
  .ant-drawer-content-wrapper {
    width: 80% !important;
    .ant-drawer-content {
      background-color: @rb-background-color;
      .ant-drawer-wrapper-body {
        .ant-drawer-header {
          padding: 17px 24px;
          border-bottom: none;
          background-color: @rb-background-color;
          .ant-drawer-header-title {
            .ant-drawer-title {
              font-weight: 600;
            }
          }
          .ant-drawer-extra {
            .item {
              color: @rb-label-color;
              cursor: pointer;
              &:hover {
                color: @rb-text-color;
              }
              .rb-icon {
                padding-right: 4px;
              }
            }
          }
        }
        .ant-drawer-body {
          padding: 0 16px;
          .container {
            height: 100%;
            padding: 12px;
            background-color: @rb-body-background;
          }
        }
        .ant-drawer-footer {
          text-align: right;
        }
      }
    }
  }
}
</style>
<style lang="less" scoped></style>
